<template>
  <div class="page-container">
    <!-- <el-empty></el-empty> -->
    <div class="page-content">
      <el-row :gutter="10">
        <el-col :span="6">
          <div class="panel-container no-margin">
            <div class="left-line">
              <el-input v-model="search" size="mini" placeholder="标签名称">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
              <i class="el-icon-circle-plus-outline icon" @click="handleAddLabel"></i>
            </div>
            <div class="label-list">
              <div class="label-item" :class="{ active: currentLabel.id === item.id }" v-for="item in labelListFilter" :key="item.id" @click="handleClickLabel(item)">{{ item.name }}<i class="el-icon-edit-outline" @click.stop="handleEditLabel(item)"></i></div>
            </div>
          </div>
        </el-col>
        <el-col :span="18">
          <div class="panel-container no-margin">
            <div class="panel-line space-between">
              <div class="title">所属标签:{{ currentLabel.name }}</div>
              <el-button type="primary" @click="handleAddLabelValue" size="mini">新增标签值</el-button>
            </div>
            <el-table stripe :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading">
              <af-table-column type="index" fixed="left" width="55" label="序号"> </af-table-column>
              <af-table-column align="center" header-align="center" show-overflow-tooltip label="标签值" prop="name"></af-table-column>
              <af-table-column align="center" header-align="center" show-overflow-tooltip label="标签人数" prop="user_count"></af-table-column>
              <af-table-column align="center" header-align="center" show-overflow-tooltip label="打标方式" prop="method">
                <template slot-scope="scope">
                  {{ scope.row.method === 1 ? '手动打标' : '自动打标' }}
                </template>
              </af-table-column>
              <af-table-column align="center" fixed="right" header-align="center" show-overflow-tooltip label="操作" width="120">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleEdit(scope)">编辑</el-button>
                  <el-button type="text" @click="handleDelete(scope)" class="button-danger">删除</el-button>
                </template>
              </af-table-column>
            </el-table>
            <el-pagination
              small
              background
              :current-page="pageNumber"
              :page-size="pageSize"
              :page-sizes="[10, 20, 50, 100]"
              :total="pageTotal"
              @current-change="currentChangeHandle"
              @size-change="sizeChangeHandle"
              layout="total, sizes, prev, pager, next, jumper"
              style="margin-top: 20px; text-align: right"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--  新增标签 -->
    <el-dialog :title="labelEditModel === 'add' ? '新增标签' : '编辑标签'" :visible.sync="showDialogAdd">
      <DialogAdd :editModel="labelEditModel" :info="currentLabel" v-if="showDialogAdd" @close="showDialogAdd = false" @success="handleAddLabelSuccess" />
    </el-dialog>
    <!--  新增标签值 -->
    <el-dialog title="标签值详情" :visible.sync="showDialogAddValue" width="80%">
      <DialogAddValue :id="currentValue.id" :labelList="labelList" :labelId="currentLabel && currentLabel.id" v-if="showDialogAddValue" @close="showDialogAddValue = false" @success="handleAddValueSuccess" />
    </el-dialog>
  </div>
</template>

<script>
import { apiLabelList, apiLabelValueList, apiLabelValueDel } from '@/api/dataStatistics'
import DialogAdd from './components/DialogAdd.vue'
import DialogAddValue from './components/DialogAddValue.vue'

export default {
  name: 'LabelManagement',
  components: { DialogAdd, DialogAddValue },
  data() {
    return {
      labelList: [],
      currentLabel: {},
      currentValue: {},
      search: '',
      showDialogAdd: false,
      showDialogAddValue: false,
      dataList: [],
      pageNumber: 1,
      pageSize: 10,
      pageTotal: 0,
      dataListLoading: false,
      labelEditModel: 'add',
    }
  },
  activated() {
    this.$refs.table.doLayout()
  },
  computed: {
    labelListFilter() {
      return this.labelList.filter((item) => {
        return item.name.includes(this.search)
      })
    },
  },
  mounted() {
    this.getLabelList()
  },
  destroyed() {},
  methods: {
    // 获取标签列表
    getLabelList() {
      apiLabelList().then((res) => {
        this.labelList = res.data
      })
    },
    // 获取数据列表
    getDataList() {
      if (!this.currentLabel.id) {
        return
      }
      this.dataListLoading = true
      let info = { pageNumber: this.pageNumber, pageSize: this.pageSize, label_id: this.currentLabel.id }
      apiLabelValueList(info)
        .then((res) => {
          const { data, total, others } = res
          this.dataList = data
          this.pageTotal = total
          this.dataListLoading = false
          this.$refs.table.doLayout()
        })
        .catch((e) => {
          this.dataList = []
          this.pageTotal = 0
          this.dataListLoading = false
        })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNumber = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNumber = val
      this.getDataList()
    },
    // 新增标签
    handleAddLabel() {
      this.labelEditModel = 'add'
      this.showDialogAdd = true
    },
    // 新增标签成功
    handleAddLabelSuccess() {
      this.showDialogAdd = false
      this.getLabelList()
      this.currentLabel = {}
    },
    // 新增标签值
    handleAddLabelValue() {
      this.currentValue = {}
      this.showDialogAddValue = true
    },
    // 新增标签值
    handleAddValueSuccess() {
      this.showDialogAddValue = false
      this.getDataList()
    },
    // 点击标签
    handleClickLabel(item) {
      this.currentLabel = item
      this.pageNumber = 1
      this.getDataList()
    },
    // 编辑标签值
    handleEdit(scope) {
      this.currentValue = scope.row
      this.showDialogAddValue = true
    },
    // 编辑标签
    handleEditLabel(item) {
      this.currentLabel = item
      this.labelEditModel = 'edit'
      this.showDialogAdd = true
    },
    // 删除标签值
    handleDelete(scope) {
      this.$confirm('确认要删除这条信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        apiLabelValueDel({ id: scope.row.id }).then((res) => {
          this.$message({
            type: 'success',
            message: '操作成功!',
          })
          setTimeout(() => {
            this.getDataList()
          }, 1000)
        })
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.asset-title {
  color: #409eff;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
.panel-line {
  margin-bottom: 12px;
}
.left-line {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-left: 10px;
    color: #5db42c;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
}
.label-list {
  margin-top: 12px;
  border: 1px solid #eee;
  padding: 12px;
  line-height: 40px;
  font-size: 14px;
  .label-item {
    padding: 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    &:hover {
      background: #f6f6f6;
    }
    &.active {
      color: #5db42c;
    }
  }
}
</style>
